<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

        <ul>
            <li>bbb</li>
        </ul>


        <script type="text/javascript">

            //需求1： 创建一个li添加到ul的最后面

            //1、创建li标签元素
            var liObj = document.createElement("LI");
            //2、给新建的li标签添加文本内容
            liObj.innerHTML="CCC";

            //3、获取ul标签对象
            var ulObjs = document.getElementsByTagName("ul"); //结果是一个数组

            //4、给ul标签下添加新增的li标签
            ulObjs[0].appendChild(liObj);




            //需求2： 再次添加一个li要求添加到ul的第一个位置
            //1、新建li标签
            var liEl = document.createElement("LI");
            liEl.innerHTML="AAA";

            //2、获取ul标签下的第一个子标签
            var liFrist = ulObjs[0].children[0];

            //3、把新增li元素，添加到第一个位置
            ulObjs[0].insertBefore(liEl , liFrist);



        </script>


    </body>
</html>